<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE html>
<html>
	<head>
		<base href="<%=basePath%>">
		<meta charset="UTF-8">
		<title>修改小程序</title>
		<link rel="stylesheet" href="static/miniApp/css/box_style.css" />
		<link rel="stylesheet" href="static/miniApp/css/cmxform.css" />
		<script type="text/javascript" src="static/miniApp/js/jquery-1.7.1.min.js" ></script>
		<script type="text/javascript" src="static/miniApp/js/jquery.validate.js" ></script>
		<script src="static/miniApp/js/bos_js.js" type="text/javascript"></script>
	</head>
	<body style="background: #f7f7f7;margin: 0;padding:0">
		<!-- <header style="width: 100%;height: 64px;background: #fff;"></header> -->
		<form action="product/updproduct" method="post" class="cmxform" onsubmit="return checkInfo();" id="form_id" enctype="multipart/form-data">
			<div class="publish_box">
				<div class="publish_head">修改小程序</div>
				<ul class="content_list">
					<li>
						<label>小程序名称</label>
						<input type="text" name="PROD_NAME" id="PROD_NAME" class="input_text" value="${updPd.PROD_NAME }"
								data-rule-required="true" 
								data-msg-required="小程序名称不能为空." placeholder="请输入小程序名称"/>
						<input type="hidden" name="ID" id="ID" value="${updPd.ID }"/>
					</li>
					<li>
						<label>小程序二维码<e>建议尺寸：不少于400*400px，并且为正方形</e></label>
						<div class="input_pic">
							<input type="file" id="hdnImg0" name="qrfile" onchange="setImagePreview(0)"/>
							<c:if test="${empty updPd.QR_CODE_ICON }"> <img src="" width="100%" height="100%" id="imgPreview0" > </c:if>
							<c:if test="${!empty updPd.QR_CODE_ICON }"> <img src="uploadFiles/uploadImgs/pc/${updPd.QR_CODE_ICON }" width="100%" height="100%" id="imgPreview0" > </c:if>
						</div>
					</li>
					<li>
						<label>公众号二维码<e>建议尺寸：不少于400*400px，并且为正方形</e></label>
						<div class="input_pic">
							<input type="file" id="hdnImg_1" name="mpCodeFile" onchange="setImagePreview('_1')"/>
							<c:if test="${empty updPd.MP_CODE_ICON }"> <img src="" width="100%" height="100%" id="imgPreview_1" > </c:if>
							<c:if test="${!empty updPd.MP_CODE_ICON }"> <img src="uploadFiles/uploadImgs/pc/${updPd.MP_CODE_ICON }" width="100%" height="100%" id="imgPreview_1" > </c:if>
						</div>
					</li>
					<li>
						<label>小程序URL<e>选填</e></label>
						<input type="text" name="APP_URL" value="${updPd.APP_URL }" class="input_text" placeholder="请输入小程序有效网址 "/>
					</li>
					<li>
						<label>小程序描述</label>
						<textarea class="input_textarea" name="PROD_DESC" placeholder="请输入小程序描述"
							data-rule-required="true" data-msg-required="小程序描述不能为空.">${updPd.PROD_DESC }</textarea>
					</li>
					<li id="icon">
						<label>添加标签<e>（最多可选择五个）</e></label>
						<c:set var="isclick" value="0"/><!-- 标签是否被选中 默认0 不被选中 --> 
						<c:forEach items="${lableList}" var="var" varStatus="vs">
							<!-- 遍历修改前被选中的标签 -->
							<c:forEach items="${label_arr}" var="la" varStatus="la_vs">
								 <c:if test="${la eq var.id}"><c:set var="isclick" value="1"/></c:if>
							</c:forEach>
							 <c:if test="${isclick eq 1}"><span class="span_click lable_span" id="${var.id }">${var.lable_name }</span></c:if> 
							 <c:if test="${isclick eq 0}"><span class="lable_span" id="${var.id }">${var.lable_name }</span></c:if> 
							 <c:set var="isclick" value="0"/><!-- 用完恢复默认值  不影响下次遍历使用 -->
						</c:forEach>
						<input type="hidden" value="${updPd.LABELS }" name="LABELS" id="LABELS" />
					</li>
					<li id="nav">
						<label>
							选择类别<e>（只能选择唯一类别）</e>
						</label>
						<c:forEach items="${applist}" var="var" varStatus="vs">
							 <c:if test="${updPd.COLUMN_ID eq var.ID}"><span class="span_click" id="${var.ID }">${var.NAME }</span></c:if> 
							 <c:if test="${updPd.COLUMN_ID ne var.ID}"><span id="${var.ID }">${var.NAME }</span></c:if> 
						</c:forEach>
						<label>
							<input type="hidden" value="${updPd.COLUMN_ID }" name="COLUMN_ID" id="COLUMN_ID"/>
						</label>
					</li>
					<li>
						<label>小程序ICON<e>建议尺寸：不小于400*400px，并且为正方形</e></label>
						<div class="input_pic">
							<input type="file" id="hdnImg1" name="iconfile" onchange="setImagePreview(1)"/>
							<c:if test="${empty updPd.PROD_ICON }"> <img src="" width="100%" height="100%" id="imgPreview1" > </c:if>
							<c:if test="${!empty updPd.PROD_ICON }"> <img src="uploadFiles/uploadImgs/pc/${updPd.PROD_ICON }" width="100%" height="100%" id="imgPreview1" > </c:if>
						</div>
					</li>
					<li id="screen_pic">
						<label>产品截图<e>建议尺寸：建议尺寸：720*1280px</e></label>
						<!-- 修改前没有产品截图 显示默认上传图片 -->
						<c:if test="${empty imgs }">
							<div class="input_pic screen_cut" id="pic2">
								<input type="file" id="hdnImg2" name="img0" onchange="setImagePreview(2)"/>
								<img src="" id="imgPreview2" class="prod_img" width="100%" height="100%">
							</div>
						</c:if>
						<!-- 修改前有产品截图 遍历显示原来截图 -->
						<c:if test="${!empty imgs }">
							<c:forEach items="${imgs }" var="img" varStatus="img_v">
								<div class="input_pic screen_cut init_del_div" id="pic${img_v.index+2 }" imgindex="${img_v.index }" imgname="${img }">
									<input type="file" id="hdnImg${img_v.index+2 }" name="img${img_v.index}" onchange="setImagePreview('${img_v.index+2 }')"/>
									<img src="uploadFiles/uploadImgs/pc/${img }" id="imgPreview${img_v.index+2 }" class="oldImg" width="100%" height="100%">
									<div class="del_but init_del_but" imgindex="${img_v.index }" imgname="${img }">删除图片</div>
								</div>
							</c:forEach>
							<c:if test="${imgslenth<4 }">
								<div class="input_pic screen_cut" id="pic${imgslenth + 2}">
									<input type="file" id="hdnImg${imgslenth + 2}" name="img${imgslenth + 2}" onchange="setImagePreview('${imgslenth + 2}')"/>
									<img src="" class="prod_img" id="imgPreview${imgslenth + 2}" width="100%" height="100%">
								</div>
							</c:if>
						</c:if>
						<!-- 保存被删除的修改前的图片名字   -->
						<input type="hidden" name="del_imgname0" id="del_imgname0"/> 
						<input type="hidden" name="del_imgname1" id="del_imgname1"/> 
						<input type="hidden" name="del_imgname2" id="del_imgname2"/> 
						<input type="hidden" name="del_imgname3" id="del_imgname3"/> 
					</li>
					<li>
						<label>小程序作者</label>
						<input type="text" value="${updPd.AUTHOR }" name="AUTHOR" class="input_text" placeholder="请输入小程序作者"
							data-rule-required="true" data-msg-required="小程序作者不能为空."/>
					</li>
				</ul>
				<div class="publish_button">
					<button id="sumbit_but">保存提交</button>
				</div>
			</div>
		</form>
	</body>
	<script type="text/javascript">
	$(".init_del_but").bind("click",function(){
		var that = $(this);
		if($("#screen_pic .screen_cut").length < 4){
			that.parent().remove();
		}else{
			if($("#screen_pic .del_but").length>3){
				var path = " ";
				that.siblings("img").attr("src",path);
				that.remove();
			}else{
				that.parent().remove();
			}
		}
		//获取被删除的图片的下班和url
		var img_index = $(this).attr("imgindex");
		var img_name = $(this).attr("imgname");
		$("#del_imgname"+img_index).val(img_name);//记录被删除的图片
	});
	$(".init_del_div").bind("click",function(){
		//获取被删除的图片的下班和url
		var img_index = $(this).attr("imgindex");
		var img_name = $(this).attr("imgname");
		$("#del_imgname"+img_index).val(img_name);//记录被删除的图片
	});
	$(document).ready(function() {
		$("#form_id").validate();
	});
	function checkInfo(){
		var qrImg = $("#imgPreview0").attr("src");
		if(qrImg == null || qrImg == '' || qrImg == undefined){
			alert("二维码图片不能为空.");
			return false;
		}
		var iconImg = $("#imgPreview1").attr("src");
		if(iconImg == null || iconImg == '' || iconImg == undefined){
			alert("小程序ICON图片不能为空.");
			return false;
		}
		var prodImg = "";
		$("#screen_pic img").each(function (){
			prodImg += $(this).attr("src");
		});
		prodImg = prodImg.replace(/(^\s*)|(\s*$)/g, "");;
		if(prodImg == null || prodImg == '' || prodImg == undefined){
			if(prodImg == null || prodImg == '' || prodImg == undefined){
				alert("至少一张产品截图.");
				return false;
			}
		}
		var labels = "";
		$("#icon .span_click").each(function(){
			labels += "," + $(this).attr("id");
		});
		if(labels == null || labels == '' || labels == undefined){
			alert("请选择标签.");
			return false;
		}
		$("#LABELS").val(labels);
		var COLUMN_ID = $("#COLUMN_ID").val();
		if(COLUMN_ID == null || COLUMN_ID == '' || COLUMN_ID == undefined){
			alert("请选择类别.");
			return false;
		}
		
		var nameNum = "";
		var prodName = $("#PROD_NAME").val();
		var prodId = $("#ID").val();
		//检验名称是否存在
		$.ajax({
			type: "POST",
			async: false,
			url: '<%=basePath%>product/findnumbyname.do?name=' + prodName + "&id=" + prodId,
			dataType:'json',
			success: function(data){
				 nameNum = data.num;
				 if(nameNum == "-1"){
					 alert("请输出小程序名称.");
					 return false;
				 }else if(nameNum == "-2"){
					 alert("系统繁忙！");
					 return false;
				 }
			}
		});
		if(nameNum == "" || parseInt(nameNum) != 0){
			alert("小程序名称已存在.");
			return false;
		}
		return true;
	}
	</script>
</html>
